<!-- 修改密码 -->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-form ref="formRef" :model="passwordForm" :rules="rules" v-loading="loading" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="旧密码：" prop="old_password">
              <el-input v-model="passwordForm.old_password" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="新密码：" prop="new_password">
              <el-input v-model="passwordForm.new_password" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="确认密码：" prop="samePassword">
              <el-input v-model="passwordForm.samePassword" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer" label-width="100px">
        <el-button type="primary" :disabled="disabledbtn" @click="submitForm(passwordForm)"> 确 定 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="changePassword">
import type { InternalRuleItem } from "async-validator";
import type { IPasswordForm } from "@/types/user";
import { updateChangepwdInfo } from "@/utils/api/master";
import { useSamePasswordVerify } from "@/utils/utils";
const disabledbtn = ref(false);
const loading = ref(false);
const formRef = useTemplateRef("formRef");
const passwordForm = reactive<IPasswordForm>({
  old_password: "",
  new_password: "",
  samePassword: ""
});

const rules = {
  old_password: [{ required: true, message: "旧密码必填", trigger: "blur" }],
  new_password: [{ required: true, message: "新密码必填", trigger: "blur" }],
  samePassword: [
    {
      required: true,
      validator: (rule: InternalRuleItem, value: string, callback: (error?: Error) => void) => {
        useSamePasswordVerify(rule, value, callback, passwordForm.new_password);
      },
      trigger: "blur"
    }
  ]
};
/* 表单数据初始化 */
function initData() {
  passwordForm.old_password = "";
  passwordForm.new_password = "";
  passwordForm.samePassword = "";
  /* 可能页面初始化的时候，DOM 还没有渲染完成，所以重置表单需要加上判断，是否有值 */
  formRef.value?.resetFields();
}
/* 保存或编辑 */
function submitForm(formData: IPasswordForm) {
  if (!formRef.value) return;
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.warning("请填写必填字段");
      return;
    }
    submitFormInfo(formData);
  });
}
function submitFormInfo(formData: IPasswordForm) {
  /* 防止多次提交 */
  disabledbtn.value = true;
  updateChangepwdInfo(formData)
    .then(res => {
      disabledbtn.value = false;
      ElMessage.success(res.msg);
      initData();
    })
    .catch(() => {})
    .finally(() => {
      disabledbtn.value = false;
    });
}
</script>
<style scoped>
.container .dialog-footer {
  margin-left: 100px;
}
</style>
